<template>
  <div class="pageContent">
    <div class="header">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="选择组别">
          <el-select v-model="formData.region" placeholder="选择组别">
            <el-option label="一号机组" value="1"></el-option>
            <el-option label="二号机组" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备在线数/总数"> 50/150 </el-form-item>
        <el-form-item label="报警状态统计"> 15 </el-form-item>
      </el-form>
    </div>
    <div class="container">
      <div class="radioContent">
        <div class="radio_item">
          <SunBurst
            v-if="sunOption1"
            :option="sunOption1"
            :height="'50%'"
          ></SunBurst>
          <SunBurst
            v-if="sunOption2"
            :option="sunOption2"
            :height="'50%'"
          ></SunBurst>
        </div>
        <div class="radio_item">
          <SunBurst
            v-if="sunOption3"
            :option="sunOption3"
            :height="'50%'"
          ></SunBurst>
          <SunBurst
            v-if="sunOption4"
            :option="sunOption4"
            :height="'50%'"
          ></SunBurst>
        </div>
        <div class="radio_item">
          <SunBurst
            v-if="sunOption5"
            :option="sunOption5"
            :height="'50%'"
          ></SunBurst>
          <SunBurst
            v-if="sunOption6"
            :option="sunOption6"
            :height="'50%'"
          ></SunBurst>
        </div>
        <div class="radio_item">
          <SunBurst
            v-if="sunOption7"
            :option="sunOption7"
            :height="'50%'"
          ></SunBurst>
          <SunBurst
            v-if="sunOption8"
            :option="sunOption8"
            :height="'50%'"
          ></SunBurst>
        </div>
      </div>
      <div class="footerBar">
        <div class="radio_item">
          <LineChart :option="option1" />
        </div>
        <div class="radio_item">
          <LineChart :option="option2" />
        </div>
        <div class="radio_item">
          <LineChart :option="option3" />
        </div>
        <div class="radio_item">
          <div class="radioTitle">报警记录</div>
          <el-table :border="true" :data="tableData" style="width: 100%">
            <el-table-column prop="1" label="分组" :align="'center'">
            </el-table-column>
            <el-table-column prop="2" label="编号" :align="'center'">
            </el-table-column>
            <el-table-column prop="3" label="日期" :align="'center'">
            </el-table-column>
            <el-table-column prop="4" label="时间" :align="'center'">
            </el-table-column>
            <el-table-column prop="5" label="温度" :align="'center'">
            </el-table-column>
            <el-table-column prop="6" label="电流" :align="'center'">
            </el-table-column>
            <el-table-column prop="7" label="磨损量" :align="'center'">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myData from "./data.js";
import SunBurst from "@/views/tool/components/echarts/SunBurst.vue";
import LineChart from "@/views/tool/components/echarts/LineChart.vue";
export default {
  name: "index",
  components: { SunBurst, LineChart },
  data() {
    return {
      formData: {
        region: "1",
      },
      tableData: [
        {
          1: "1号机组",
          2: "1234589",
          3: "2025-05-28",
          4: "14:58:40",
          5: "90",
          6: "45",
          7: "88",
        },
        {
          1: "2号机组",
          2: "1234589",
          3: "2025-05-27",
          4: "18:58:40",
          5: "80",
          6: "75",
          7: "67",
        },
        {
          1: "1号机组",
          2: "1245998",
          3: "2025-05-27",
          4: "16:58:40",
          5: "90",
          6: "125",
          7: "90",
        },
        {
          1: "3号机组",
          2: "1234599",
          3: "2025-05-26",
          4: "16:58:40",
          5: "80",
          6: "40",
          7: "70",
        },
      ],
      option1: null,
      option2: null,
      option3: null,

      sunOption1: null,
      sunOption2: null,
      sunOption3: null,
      sunOption4: null,
      sunOption5: null,
      sunOption6: null,
      sunOption7: null,
      sunOption8: null,

      option: {
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "sunburst",
            radius: [0, "90%"],
            center: ["50%", "50%"],
            sort: undefined,
            emphasis: {
              focus: "none",
              blurScope: "series",
            },
            data: [],
            nodeClick: false,
            itemStyle: {
              color: "#ffffff",
            },
            levels: [
              {},
              {
                r0: "0%",
                r: "25%",
                label: {
                  lineHeight: 20,
                  rotate: 0,
                },
              },
              {
                r0: "25%",
                r: "27%",
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "#0ca6ff",
                  color: "#0ca6ff",
                },
                label: {
                  color: "transparent",
                  show: false,
                },
              },
              {
                r0: "27%",
                r: "50%",
                itemStyle: {
                  borderWidth: 0,
                },
                label: {
                  align: "right",
                  rotate: "tangential",
                  fontSize: 10,
                  distance: 10,
                },
              },
              {
                r0: "50%",
                r: "54%",
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "#0ca6ff",
                  color: "#0ca6ff",
                },
                label: { color: "transparent", show: false },
              },
              {
                r0: "54%",
                r: "80%",
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "#0ca6ff",
                },
                label: {
                  rotate: "tangential",
                  fontSize: 12,
                },
              },
              {
                r0: "80%",
                r: "84%",
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "#0ca6ff",
                  color: "#0ca6ff",
                },
                label: { color: "transparent", show: false },
              },
            ],
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.sunDraw1(`sunOption1`);
    this.sunDraw1(`sunOption2`);
    this.sunDraw1(`sunOption3`);
    this.sunDraw1(`sunOption4`);
    this.sunDraw1(`sunOption5`);
    this.sunDraw1(`sunOption6`);
    this.sunDraw1(`sunOption7`);
    this.sunDraw1(`sunOption8`);

    this.draw1();
    this.draw2();
    this.draw3();
  },
  methods: {
    draw1() {
      this.option1 = {
        title: {
          text: "温度平均值/每小时",
          left: "center",
          top: "40",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "20",
          top: "100",
          right: "40",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          axisLabel: {
            show: true,
            color: "#4b4b4b",
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#6287d2",
            },
            smooth: false,
            data: [72, 15, 98, 34, 53, 61, 82, 27, 44, 68],
          },
        ],
      };
    },
    draw2() {
      this.option2 = {
        title: {
          text: "电流平均值/每小时",
          left: "center",
          top: "40",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "20",
          top: "100",
          right: "40",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          axisLabel: {
            show: true,
            color: "#4b4b4b",
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#ef9148",
            },
            smooth: false,
            data: [62, 54, 33, 78, 92, 57, 41, 88, 73, 61],
          },
        ],
      };
    },
    draw3() {
      this.option3 = {
        title: {
          text: "距离平均值/每小时",
          left: "center",
          top: "40",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "20",
          top: "100",
          right: "40",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          axisLabel: {
            show: true,
            color: "#4b4b4b",
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#89c65e",
            },
            smooth: false,
            data: [34, 69, 51, 83, 77, 56, 91, 42, 63, 71],
          },
        ],
      };
    },
    sunDraw1(type) {
      try {
        let { label, value, name } = myData[type];
        if (label && value && name) {
          let data = [];
          for (let index = 0; index < label.length; index++) {
            const labelP = label[index];
            const valueP = value[index];
            data.push({
              name: labelP,
              children: [
                {
                  name: labelP,
                  value: 1,
                  children: [
                    {
                      name: labelP,
                      value: 1,
                      children: [
                        {
                          name: valueP,
                          value: 1,
                          children: [
                            {
                              name: labelP,
                              value: 1,
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            });
          }

          let option = JSON.parse(JSON.stringify(this.option));

          option.series[0].data = [
            {
              name: name,
              children: data,
            },
          ];
          this.$set(this, type, option);
          console.log(first);
        }
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.pageContent {
  height: 100%;
  padding: 10px;
  background: #f7f7f7;

  display: flex;
  flex-direction: column;

  .header {
    padding-top: 22px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    .el-form {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  .container {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    .radioContent {
      margin-top: 10px;
      display: flex;
      flex: 2;
      width: 100%;
      .radio_item {
        height: 100%;
        background: #ffffff;
        width: calc(25% - 9px);
        &:not(:last-child) {
          margin-right: 12px;
        }
      }
    }
    .footerBar {
      margin-top: 10px;
      display: flex;
      flex: 1;
      width: 100%;
      .radio_item {
        height: 100%;
        background: #ffffff;
        width: calc(25% - 9px);
        .radioTitle {
          font-size: 20px;
          font-weight: bold;
          padding: 0 10px;
          margin: 10px;
          border-left: 4px solid #0ca6ff;
        }
        &:not(:last-child) {
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
